<template>
  <div>
    <GlassNavbar @scrollTo="scrollToSection" />

    <!-- 首页 -->
    <section id="home">
      <div style="height: 170px"></div>
      <div class="gradient-text">
        <GradientText text="论文阅读一站式解决方案" fontSize="3rem" />
      </div>
      <div class="logo-boxes">
        <div class="single-logo-box">
          <div class="logo">
            <img src="@/assets/icon/translate.png" alt="Logo" />
          </div>
          <div class="logo-text">文献翻译</div>
        </div>
        <div class="single-logo-box">
          <div class="logo">
            <img src="@/assets/icon/deepseek.png" alt="Logo" />
          </div>
          <div class="logo-text">文献智读</div>
        </div>
        <div class="single-logo-box">
          <div class="logo">
            <img src="@/assets/icon/note.png" alt="Logo" />
          </div>
          <div class="logo-text">个性化笔记</div>
        </div>
        <div class="single-logo-box">
          <div class="logo">
            <img src="@/assets/icon/pdf.png" alt="Logo" />
          </div>
          <div class="logo-text">文献上传</div>
        </div>
        <div class="single-logo-box">
          <div class="logo">
            <img src="@/assets/icon/manage.png" alt="Logo" />
          </div>
          <div class="logo-text">文献管理</div>
        </div>
        <div class="single-logo-box">
          <div class="logo">
            <img src="@/assets/icon/search.png" alt="Logo" />
          </div>
          <div class="logo-text">文献搜索</div>
        </div>
      </div>
      <div class="citation">
        一群全球最聪明的人，做着全世界最先进的研究，解决着全世界最难的问题，却在用着在这个时代很落后的生产力工具，所以我们想做一点改变
      </div>
      <div class="button-box">
        <button class="login-button" @click="goToLogin">登<span style="margin-right: 12px;"></span>录</button>
        <button class="register-button" @click="goToRegister">注<span style="margin-right: 12px;"></span>册</button>
      </div>

      <div class="video">
        <AutoPlayVideo />
      </div>

      <div style="height: 200px"></div>

      <div class="function-boxes">
        <div style="height: 150px"></div>

        <div class="function-box">
          <div class="video-box">
            <FadeInOnScroll  style="aspect-ratio: 16/8;" direction="left" :distance="200" :triggerRatio="0.7">
              <video src="https://webpub.shlab.tech/dps/opendatalab-web/mineru-website-csr-prod.1981/assets/home-Sa0hpDh_.mp4"
                     class="function-video" autoplay muted loop></video>
            </FadeInOnScroll>
          </div>
          <div class="text-box">
            <FadeInOnScroll direction="right"  :distance="200" :triggerRatio="0.7">
              <h1>滑动至屏幕 30% 位置时完全显现</h1>
            </FadeInOnScroll>
          </div>
        </div>

        <div style="height: 200px"></div>

        <div class="function-box">
          <div class="video-box">
            <FadeInOnScroll  style="aspect-ratio: 16/8;" direction="left" :distance="200" :triggerRatio="0.7">
              <video src="https://webpub.shlab.tech/dps/opendatalab-web/mineru-website-csr-prod.1981/assets/home-Sa0hpDh_.mp4"
                     class="function-video" autoplay muted loop></video>
            </FadeInOnScroll>
          </div>
          <div class="text-box">
            <FadeInOnScroll direction="right"  :distance="200" :triggerRatio="0.7">
              <h1>滑动至屏幕 30% 位置时完全显现</h1>
            </FadeInOnScroll>
          </div>
        </div>

        <div style="height: 200px"></div>

        <div class="function-box">
          <div class="video-box">
            <FadeInOnScroll  style="aspect-ratio: 16/8;" direction="left" :distance="200" :triggerRatio="0.7">
              <video src="https://webpub.shlab.tech/dps/opendatalab-web/mineru-website-csr-prod.1981/assets/home-Sa0hpDh_.mp4"
                     class="function-video" autoplay muted loop></video>
            </FadeInOnScroll>
          </div>
          <div class="text-box">
            <FadeInOnScroll direction="right"  :distance="200" :triggerRatio="0.7">
              <h1>滑动至屏幕 30% 位置时完全显现</h1>
            </FadeInOnScroll>
          </div>
        </div>

        <div style="height: 200px"></div>

        <div class="function-box">
          <div class="video-box">
            <FadeInOnScroll  style="aspect-ratio: 16/8;" direction="left" :distance="200" :triggerRatio="0.7">
              <video src="https://webpub.shlab.tech/dps/opendatalab-web/mineru-website-csr-prod.1981/assets/home-Sa0hpDh_.mp4"
                     class="function-video" autoplay muted loop></video>
            </FadeInOnScroll>
          </div>
          <div class="text-box">
            <FadeInOnScroll direction="right"  :distance="200" :triggerRatio="0.7">
              <h1>滑动至屏幕 30% 位置时完全显现</h1>
            </FadeInOnScroll>
          </div>
        </div>

        <div style="height: 150px"></div>
      </div>


    </section>

    <!-- 关于我们 -->
    <section id="about" class="switch-section">
      <div class="info">
        <div class="info-content">
          <p class="title">与 SDSE AIR 一起探索下一代论文智读方向</p>
          <p class="subtitle">掀起智读新浪潮，开启科研新纪元 :）</p>
          <div class="button-wrapper">
            <div class="cta-button">
              <div class="cta-bg"></div>
              <div class="cta-text">
                <span class="text-show">了解更多</span>
                <span class="text-hide">了解更多</span>
              </div>
            </div>
          </div>
          <img class="info-logo" src="@/assets/peachy.png" alt="github-section-logo"/>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section id="faq">
      <div class="info auto-info">
        <div class="info-content">
          <p class="title">常见问题</p>
          <p class="subtitle">以下是我们平台用户最关心的问题解答</p>

          <div class="faq-list">
            <div class="faq-item">
              <p class="faq-q">Q：平台是否收费？</p>
              <p class="faq-a">A：目前平台处于免费内测阶段，所有功能均可免费使用。</p>
            </div>

            <div class="faq-item">
              <p class="faq-q">Q：支持哪些文献格式？</p>
              <p class="faq-a">A：当前支持 PDF 格式，未来将拓展至 Word、网页等格式。</p>
            </div>

            <div class="faq-item">
              <p class="faq-q">Q：上传的文件会被保存多久？</p>
              <p class="faq-a">A：默认长期保存，除非用户主动删除或注销账户。</p>
            </div>

            <div class="faq-item">
              <p class="faq-q">Q：AI 阅读是否支持中文？</p>
              <p class="faq-a">A：支持中英文双向理解，并可进行翻译、问答、笔记标记等操作。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <FooterSection />
  </div>
</template>

<script>
import FadeInOnScroll from '@/components/FadeInOnScroll.vue';
import GlassNavbar from '@/components/GlassNavbar.vue';
import GradientText from "@/components/GradientText.vue";
import AutoPlayVideo from '@/components/AutoPlayVideo.vue';
import FooterSection from '@/components/FooterSection.vue';
export default {
  name: "CssExample",
  components: {
    FadeInOnScroll,
    GlassNavbar,
    GradientText,
    AutoPlayVideo,
    FooterSection,
  },
  data() {
    return {
    };
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    scrollToSection(sectionId) {
      const target = document.getElementById(sectionId);
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
      }
    },
    goToLogin() {
      this.$router.push('/login');
    },
    goToRegister() {
      this.$router.push('/register');
    }
  }
};
</script>

<style scoped>
.gradient-text {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(25px); /* 初始下移 */
  animation: fadeInBottomToTop 1.0s ease-out forwards;
  animation-delay: 0.3s; /* 可选延迟 */
}
.citation {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  padding: 30px 29%;
  color: black;
  opacity: 0;
  transform: translateY(20px); /* 初始下移 */
  animation: fadeInBottomToTop 0.75s ease-out forwards;
  animation-delay: 0.7s; /* 可选延迟 */
}
@keyframes fadeInBottomToTop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.logo {
  display: flex;
  align-items: center;
  justify-content: left;
}

.logo img {
  width: 64px;
  height: auto;
  margin: 16px;
}

.logo-text {
  font-weight: 600;
  font-size: 15px;
}

.single-logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 120px;
  text-align: center;
}

.logo-boxes {
  display: flex;
  align-items: center;     /* 垂直居中（如果父容器高度足够） */
  justify-content: center; /* 水平居中整体排列 */
  gap: 60px;               /* 小盒子之间的间距 */
  flex-wrap: wrap;         /* 可选：如果屏幕变窄时自动换行 */
  height: 100%;            /* 父容器需指定高度 */
  margin: 40px 0 20px 0;
  opacity: 0;
  transform: translateY(35px); /* 初始下移 */
  animation: fadeInBottomToTop 0.9s ease-out forwards;
  animation-delay: 0.5s; /* 可选延迟 */
}

@keyframes slideInLeftRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.login-button {
  padding: 9px 50px;
  margin: 0 35px;
  border-radius: 9999px;
  background-color: black;
  font-weight: 600;
  font-size: 20px;
  color: white;
  border: 1px solid black;
  cursor: pointer;
  transition: all 0.3s ease-out;
  opacity: 0;
  transform: translateX(-50px); /* 初始下移 */
  animation: slideInLeftRight 0.75s ease-out forwards;
  animation-delay: 0.8s; /* 可选延迟 */
}

.login-button:hover {
  background-color: #1c1a1a;
  color: white;
  border: 1px solid black;
}

.register-button {
  padding: 9px 50px;
  margin: 0 35px;
  border-radius: 9999px;
  background-color: white;
  font-weight: 600;
  font-size: 20px;
  color: black;
  border: 1px solid black;
  cursor: pointer;
  transition: all 0.3s ease-out;
  opacity: 0;
  transform: translateX(50px);
  animation: slideInLeftRight 0.75s ease-out forwards;
  animation-delay: 0.8s; /* 可选延迟 */
}

.register-button:hover {
  background-color: #e3e2e2;
  color: black;
  border: 1px solid black;
}

.button-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.video {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  opacity: 0;
  transform: translateY(150px); /* 初始下移 */
  animation: fadeInBottomToTop 0.8s ease-out forwards;
  animation-delay: 1.15s; /* 可选延迟 */
}

.function-boxes {
  background-color: rgb(247,249,253);
}

.function-box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-box {
  width: 50%;
  height: auto;
}

.text-box {
  width: 15%;
  height: auto;
  position: relative;
}

.function-video {
  height: 100%;
  width: auto;
  max-height: 800px;
  min-height: 300px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(88, 66, 242, 0.2);
}

.info {
  width: 100%;
  height: 24rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  margin: 100px 0;
  border-radius: 20px;
  position: relative;
}

.info-content {
  width: 100%;
  max-width: 1200px; /* 控制最大宽度 */
  padding: 0 2rem; /* 控制左右留白 */
  margin: 0 auto; /* 水平居中 */
  height: auto;
  min-height: 23rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background-color: transparent;
  box-sizing: border-box;
  padding-bottom: 80px;
}

.info-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-size: 100% 100%;
  background: linear-gradient(
      135deg,
      rgba(50, 100, 255, 0.1) ,
      rgba(50, 77, 255, 0.1)
  ) center;
  filter: blur(80px);
  opacity: 0.6;
  transition: background 0.3s ease;
}

.info-content:hover::before {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.15),
      rgba(50, 77, 255, 0.15)
  );
}

@media (max-width: 768px) {
  .info-content {
    padding: 1rem; /* 小屏时减小内边距 */
  }
}

@media (max-width: 480px) {
  .info-content {
    padding: 0.5rem;
  }
}

.title {
  font-size: 32px;
  font-weight: 600;
  line-height: 3rem;
  margin-top: 6.5rem;
  margin-bottom: 0.3rem;
  text-align: center;
  color: #000;
}

.subtitle {
  font-size: 22px;
  line-height: 2rem;
  margin-bottom: 2.5rem;
  color: #000;
  text-align: center;
}

/* 按钮区域 */
.button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-button {
  width: 110px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 0.01rem solid black;
  background-color: black;
  color: white;
  padding: 0 1rem;
  font-size: 1.125rem;
  line-height: normal;
  border-radius: 9999px;
}

.cta-bg {
  position: absolute;
  inset: 0;
  border-radius: 4rem;
  background: rgba(255, 255, 255, 1);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.cta-button:hover .cta-bg {
  transform: translateX(0);
}

.cta-text {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-text .text-show {
  position: absolute;
  color: white;
  font-size: 16px;
  transition: all 0.4s ease;
  opacity: 1;
  transform: none;
}

.cta-text .text-hide {
  position: absolute;
  color: black;
  font-size: 16px;
  transition: all 0.4s ease;
  opacity: 0;
  transform: none;
}

.cta-button:hover .text-show {
  opacity: 0;
  transform: translateX(50px) rotateY(90deg);
}

.cta-text .text-hide {
  opacity: 0;
  transform: translateX(-50px) rotateY(90deg);
}

.cta-button:hover .text-hide {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.info-logo {
  position: absolute;
  width: 150px; /* 设置宽度 */
  height: auto; /* 自动等比缩放 */
  bottom: 20px;
  left: 40px;
  display: none;
}

@media (min-width: 1024px) {
  .info-logo {
    display: block;
    left: 60px;
  }
}
@media (min-width: 1280px) {
  .info-logo {
    left: 80px;
  }
}
.faq-list {
  width: 100%;
  max-width: 1000px; /* 扩大宽度，更居中展示 */
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faq-item {
  background: #ffffff;
  padding: 1.2rem 1.6rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.faq-q {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0.5rem;
  color: #222;
}

.faq-a {
  font-size: 17px;
  color: #444;
  line-height: 1.75;
}

/* 响应式：在小屏设备上缩小内容宽度 */
@media (max-width: 768px) {
  .faq-list {
    padding: 0 1rem;
  }
  .faq-q {
    font-size: 18px;
  }
  .faq-a {
    font-size: 16px;
  }
}
.auto-info {
  height: auto !important;
  padding: 40px 1.5rem;
}
</style>
